<template>
  <readonly-form :fields="dataFields.data" :data="data" />
</template>

<script>
import { reactive } from "vue";
import { handleFormEmptyData } from "@/tools/filters";
import { useI18n } from "vue-i18n";

export default {
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
    types: Object,
  },
  setup(props, content) {
    const { t } = useI18n();
    const dataFields = reactive({
      data: [
        {
          title: t('button.detail'),
          fields: [
            { span: 6, title: t('channelManage.label.telephone'), field: "phone" },
            { span: 6, title: "Email", field: "email" },
            { span: 6, title: t('channelManage.label.documentType'), field: "papersType" },
            { span: 6, title: t('channelManage.label.certificateNo'), field: "papersNum" },
            { span: 6, title: t('channelManage.label.collectionAccountNumber'), field: "payAmt" },
            { span: 6, title: t('channelManage.label.performanceForecast'), field: "forecastNum" },
            { span: 6, title: t('channelManage.label.performanceCalculationPoint'), field: "perfmNode" },
            { span: 6, title: t('channelManage.label.organizationType'), field: "organized" },
            { span: 6, title: t('channelManage.label.formOfCooperation'), field: "tradeForms" },
          ],
        },
        {
          title: t('channelManage.label.commissionAllocation'),
          fields: "commisInfoList",
          type: "array",
          childFields: [
            { span: 24, title: t('channelManage.label.calculationType'), field: "commisType" },
            { span: 12, title: t('channelManage.label.numberOfSignatories'), field: "userNums" },
            { span: 12, title: t('channelManage.label.commissionPercentage'), field: "rates" },
          ],
        },
        {
          title: t('channelManage.label.basicSalary'),
          fields: [
            { span: 12, title: t('channelManage.label.jianqunlaPeople'), field: "bgppTrials" },
            { span: 12, title: t('channelManage.label.collectAllKindsOfStudentResources'), field: "collectTrials" },
            { span: 12, title: t('channelManage.label.seekLocalSponsorshipCooperation'), field: "sponsorTrials" },
            { span: 12, title: t('channelManage.label.offlineActivityDisplay'), field: "pshowTrials" },
            { span: 12, title: t('channelManage.label.eventPlanning'), field: "planTrials" },
            { span: 12, title: t('channelManage.label.monthlyPromotion'), field: "promoteTrials" },
          ],
        },
        {
          title: t('channelManage.label.attachmentInformation'),
          fields: [
            { span: 24, title: t('channelManage.label.agreement'), field: "protocalName" },
            { span: 24, title: t('channelManage.label.otherAccessories'), field: "accessoryName" },
          ],
        },
      ],
    });

    if (props.types.commisType == 0) {
      dataFields.data.splice(1, 1, {
        title: t('channelManage.label.commissionAllocation'),
        fields: [
          { span: 8, title: t('channelManage.label.calculationType'), field: "commisType" },
          { span: 8, title: t('channelManage.label.commissionPercentage'), field: "rate" },
        ],
      })
    }

    return {
      t,
      dataFields,
      handleFormEmptyData,
    };
  },
};
</script>
